<template>
  <div class="about">
    <div class="head">
      <img :src="srcs" alt="" />
      <ul>
        <li><router-link to="/index">首页</router-link></li>
        <li><router-link to="/home/teachr">师资介绍</router-link></li>
        <li><router-link to="/home/course">课程介绍</router-link></li>
        <li><router-link to="/home/student">学生作品</router-link></li>
        <li><router-link to="/home/public">公共教程</router-link></li>
        <li><router-link to="/home/join">外包合作</router-link></li>
        <li><router-link to="/home/environment">教学环境</router-link></li>
      </ul>
    </div>
    <div class="abouts">
      <div class="about-yj">
        <div class="line">
          <span></span>
          <h2>关于雁甲</h2>
        </div>
        <div class="wenzi">
          <span>
            未墨原画培训自成立以来，一直本着以人为本，技艺优先，服务至上的宗  旨，全心全意为学生服务，公司主营2D原画培训，在“做有内容、有深度、 有高度的培训机构”的共同
            理念下，结合行业发展方向,最有效地实现设计和艺术聚集的创意力量。未 墨以培养绘画人为核心,依靠精准的市场定位、高质量的课程体系、严格规  范的教学质量,未墨无论
            是创始人还是管理层都是原画界资深设计师，了解整个CG产业，核心成员  业界资历10年以上，功底实，不仅能够掌握时尚前卫的设计理念，且兼具  学院派的严谨。
          </span>
        </div>
      </div>
    </div>
    <div class="teachers">
      <div class="szll">
        <div class="line">
          <span></span>
          <h2>关于雁甲</h2>
        </div>
        <ul class="introduce">
          <li v-for="val in list" :key="val.t_id">
            <img :src="val.t_imageurl" alt="">
            <p class="p1">{{val.t_name}}</p>
            <p class="p2">{{val.t_content}}</p>
            <a :href="val.t_weibourl">http://weibo.com/xxx</a>
          </li>
        </ul>
        <ul class="works">
          <li>
            <img src="@/assets/img/index-5.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-4.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-3.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-2.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-1.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-10.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-9.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-8.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-7.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-6.png" alt="">
            <a href="#/home/student">查看更多学生作品 —＞</a>
          </li>
        </ul>
    </div>
    </div>
    <!-- 我们的教学 -->
    <div class="teaching">
      <div class="teaching-s">
        <div class="line">
          <span></span>
          <h2>我们的教学</h2>
        </div>
        <div class="teaching-class">
          <div class="class-top">
            <div class="class-top-left">
              <img src="@/assets/img/push.png" alt="">
              <div>
                <h3>推送机制</h3>
                <p>
                  关于人才输出，我们与各大公司都有合作,
                  与西山居有着密切合作,优秀的学员更有
                  机会获得内聘的机会。
                </p>
              </div>
            </div>
            <div class="class-top-right">
              <div>
                <h4>场景进阶实体班</h4>
                <p>
                  课程主要内容游戏、影视、动画场景(概念设计、规划设计、单体设计)
                  全能场景绘画精英班
                </p>
              </div>
              <a href="javascript">
                <img src="@/assets/img/right-arrow.png"/>
              </a>
            </div>
          </div>
          <div class="class-top">
            <div class="class-top-left">
              <img src="@/assets/img/course.png" alt="">
              <div>
                <h3>课程控制</h3>
                <p>
                  关于课程，我们有着详细的课程计划，老
                  师会实时跟进，保姆式教学每日作业跟进，
                  每周作业点评与强调，阶段性的作品输出，
                  保证大家的学习质量。
                </p>
              </div>
            </div>
            <div class="class-top-right mt-57">
              <div>
                <h4>场景进阶实体班</h4>
                <p>
                  课程主要内容游戏场景(概念设计、规划设计、单体设计)附带部分写实
                  影视绘画技法和创作思路
                </p>
              </div>
              <a href="javascript">
                <img src="@/assets/img/right-arrow.png"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学生作品 -->
    <div class="student">
        <div class="line">
          <span></span>
          <h2>我们的教学</h2>
        </div>
        <ul>
          <li><img src="@/assets/img/index2-1.png" alt=""></li>
          <li><img src="@/assets/img/index2-2.png" alt=""></li>
          <li><img src="@/assets/img/index2-3.png" alt=""></li>
          <li><img src="@/assets/img/index2-4.png" alt=""></li>
          <li><img src="@/assets/img/index2-5.png" alt=""></li>
          <li><img src="@/assets/img/index2-6.png" alt=""></li>
          <li><img src="@/assets/img/index2-7.png" alt=""></li>
          <li><img src="@/assets/img/index2-8.png" alt=""></li>
          <li><img src="@/assets/img/index2-9.png" alt=""></li>
          <li><img src="@/assets/img/index2-10.png" alt=""></li>
          <li><img src="@/assets/img/index2-11.png" alt=""></li>
          <li><img src="@/assets/img/index2-12.png" alt=""></li>
          <li><img src="@/assets/img/index2-13.png" alt=""></li>
          <li><img src="@/assets/img/index2-14.png" alt=""></li>
          <li>
            <img src="@/assets/img/index2-15.png" alt="">
            <a href="#/home/teachr">查看更多老师作品 —＞</a>
          </li>
        </ul>
    </div>
    <!-- 外包合作 -->
    <div class="epiboly">
      <div>
        <div class="line">
          <span></span>
          <h2>外包合作</h2>
        </div>
        <ul class="epiboly-s">
        <li><img src="@/assets/img/netease.png" alt=""></li>
        <li><img src="@/assets/img/xishangju.png" alt=""></li>
        <li><img src="@/assets/img/grand.png" alt=""></li>
        <li><img src="@/assets/img/poly-le.png" alt=""></li>
        <li><img src="@/assets/img/wind.png" alt=""></li>
        <li><img src="@/assets/img/joy.png" alt=""></li>
        <li><img src="@/assets/img/ucvr.png" alt=""></li>
        <li><img src="@/assets/img/bilibli.png" alt=""></li>
        </ul>
        <ul class="works">
          <li>
            <img src="@/assets/img/index-5.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-4.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-3.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-2.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-1.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-10.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-9.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-8.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-7.png" alt="">
          </li>
          <li>
            <img src="@/assets/img/index-6.png" alt="">
            <a href="#/home/join">查看更多外包作品 —＞</a>
          </li>
        </ul>
      </div>
      <div class="site">
        <!-- <img src="@/assets/img/site.png" alt=""> -->
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="login">
         <img src="@/assets/img/logo.png" alt="">
      </div>
      <div class="hellp">
         <img src="@/assets/img/2_03.jpg" alt="">
         <img src="@/assets/img/2_05.jpg" alt="">
         <img src="@/assets/img/2_07.jpg" alt="">
      </div>
      <p>请问您需要什么帮助？</p>
      <div class="operate">
         <div class="operate-one">
               <div><span></span><a href="#/home/teachr">查看我们的作品</a></div>
               <div><span></span><a href="#/home/relation">联系我们</a></div>
            </div>
            <div class="operate-one">
               <div><span></span><a href="#/home/course">查看我们的课程</a></div>
               <div><span></span><a href="#/home/public">加入我们</a></div>
            </div>
      </div>
      </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
const srcs = ref(null)
const list = ref(null)
const { proxy } = getCurrentInstance()
proxy.$http.get('https://yami.h5.yscase.com/yanjia/global/setting').then((val) => {
    console.log(val.data.data[0])
    srcs.value = val.data.data[0].image
  })
  proxy.$http.get('https://yami.h5.yscase.com/yanjia/teacher/list').then((val) => {
    console.log(val.data.data)
    list.value = val.data.data
  })
proxy.$http.get('https://yami.h5.yscase.com/yanjia/teacher/works?teacher_id=6').then((val) => {
    console.log(val.data)
})
</script>
<script>
</script>
<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
.head li .router-link-exact-active {
   border: 1px solid #353535;
}
.about {
  position: relative;
  background-color: #f4f4f4;
}
.head {
  width: 100%;
  position: relative;
  background-color: #171719;
  img {
    width: 100%;
    height: auto;
  }
  ul {
    display: flex;
    position: absolute;
    top: 25px;
    right: 215px;
    list-style: none;
    li {
      a {
        color: #ededed;
        font-size: 16px;
        line-height: 16px;
        padding: 6px 35px;
        border: 1px solid transparent;
        border-radius: 30px;
        text-decoration: none;
      }
    }
    li:hover a {
      border: 1px solid #ededed;
      border-radius: 30px;
    }
  }
}
.line {
  width: 100%;
  padding-left: 213px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  span {
    display: block;
    width: 5px;
    height: 29px;
    background-color: #bcbcbc;
    margin-right: 10px;
  }
  h2 {
    font-size: 27px;
    line-height: 27px;
    color: #bcbcbc;
  }
}
// .box {
//   position: relative;
//   width: 100%;
//   height: 330px;
//   padding: 0 115px;
//   box-sizing: border-box;
//   border-bottom: 1px solid #bcbcbc;
// }
.abouts {
  width: 100%;
  background-color: #171719;
  .about-yj {
    width: 1690px;
    height: 260px;
    margin: auto;
    padding-top: 50px;
    .wenzi {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      text-align: left;
      font-size: 16px;
      line-height: 37px;
      color: #a2a2a2;
      padding: 0 230px 45px;
      border-bottom: 1px solid #bcbcbc;
    }
  }
}
.teachers {
  padding: 0 115px;
  box-sizing: border-box;
  background-color: #171719;
  position: relative;
  .introduce {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 50px;
    li {
      list-style: none;
      &:nth-child(1) {
        margin-right: 200px;
      }
      .p1 {
        font-size: 21px;
        color: #bcbcbc;
        line-height: 21px;
        margin-top: 8px;
      }
      .p2 {
        font-size: 16px;
        color: #bcbcbc;
        line-height: 16px;
        margin: 12px 0 10px;
      }
      a {
        color: #0083f2;
        font-size: 14px;
        line-height: 14px;
      }
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: block;
        margin: auto;
      }
    }
  }
  .works {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 313px;
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 380px;
      height: 380px;
      img {
        width: 100%;
        display: block;
        height: 100%;
      }
      a {
        width: 100%;
        position: absolute;
        font-size: 21px;
        color: #f4f4f4;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-decoration: none;
      }
    }
  }
}
.teaching {
  margin-top: 830px;
  padding: 0 330px;
  box-sizing: border-box;
  margin-bottom: 120px;
  .line {
    padding: 0;
    span {
      background-color: #353535;
    }
    h2 {
      color: #353535;
    }
  }
  .teaching-class {
    margin-top: 55px;
    .class-top {
      display: flex;
      justify-content: space-between;
      .class-top-left {
        display: flex;
        align-items: center;
        >img {
          width: 126px;
          height: 126px;
        }
        div {
          width: 302px;
          text-align: left;
          margin-left: 25px;
          line-height: 25px;
          h3 {
            font-size: 18px;
            color: #353535;
            font-weight: 600;
          }
          p {
            font-size: 16px;
            color: #3b3b3b;
          }
        }
      }
      .class-top-right {
        display: flex;
        text-align: left;
        height: 172px;
        width: 726px;
        border-radius: 90px;
        background-color: #353535;
        align-items: center;
        color: #f4f4f4;
        padding: 0 55px;
        box-sizing: border-box;
        img {
          width: 55px;
          height: 40px;
          margin-left: 70px;
        }
        div {
          h4 {
            font-size: 28px;
            color: #f4f4f4;
            font-weight: 400;
          }
          p {
            font-size: 16px;
            color: #f4f4f4;
            line-height: 30px;
            margin-top: 9px;
          }
        }
      }
      .mt-57 {
        margin-top: 57px;
      }
    }
  }
}
.student {
  margin-bottom: 105px;
  .line {
    padding-left: 330px;
    span {
      background-color: #353535;
    }
    h2 {
      color: #353535;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 380px;
      height: 380px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      a {
        width: 100%;
        position: absolute;
        font-size: 21px;
        color: #f4f4f4;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-decoration: none;
      }
    }
  }
}
.epiboly {
  position: relative;
  >div {
    box-sizing: border-box;
    padding: 0 330px;
    .line {
    padding-left: 0px;
    span {
      background-color: #353535;
    }
    h2 {
      color: #353535;
    }
  }
  .epiboly-s {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 94px;
    li {
      height: 152px;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:nth-child(1),
      &:nth-child(5) {
        width: 335px;
      }
      &:nth-child(5) {
        img {
          width: 275px;
          height: 77px;
        }
      }
      &:nth-child(2),
      &:nth-child(6) {
        width: 285px;
        img {
          width: 195px;
          height: 85px;
          transform: scale(0.8);
        }
      }
      &:nth-child(3),
      &:nth-child(7) {
        width: 354px;
        img {
          width: 305px;
          height: 152px;
        }
      }
      &:nth-child(7) {
        img {
          margin-left: 35px;
          width: 229px;
          height: 61px;
        }
      }
      img {
        width: 246px;
        height: 105px;
      }
    }
  }
  .works {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 445px;
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 380px;
      height: 380px;
      img {
        width: 100%;
        display: block;
        height: 100%;
      }
      a {
        width: 100%;
        position: absolute;
        font-size: 21px;
        color: #f4f4f4;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-decoration: none;
      }
    }
  }
  }
  .site {
    margin-top: 760px;
    width: 100%;
    height: 532px;
    background: url(@/assets/img/site.png) no-repeat 100% 100%;
  }
}
   .bottom {
      width: 100%;
      background-color: #202022;
      overflow: hidden;
      .login {
         width: 318px;
         height: 81px;
         margin: 35px auto 30px;
         img {
            width: 100%;
            height: 100%;
         }
      }
      .hellp {
         display: flex;
         justify-content: center;
         margin-bottom: 36px;
         img {
            width: 58px;
            height: 58px;
            &:nth-child(2) {
               margin: 0 22px;
            }
         }
      }
      >p {
         font-size: 21px;
         color: #a6a6a6;
         // line-height: 21px;
         padding-bottom: 15px;
      }
      .operate {
         width: 378px;
         margin: 0 auto 83px;
         padding-top: 18px;
         border-top: 1px solid #bababa;
         .operate-one {
            display: flex;
            width: 290px;
            justify-content: center;
            margin: auto;
            &:nth-child(1) {
               margin-bottom: 14px;
            }
            div {
               font-size: 16px;
               color: #a6a6a6;
               display: flex;
               align-items: center;
               a {
                  font-size: 16px;
                  color: #a6a6a6;
                  text-decoration: none;
               }
               a:hover {
                  color: #c4b282;
                  text-decoration: underline;
               }
               span {
                  width: 9px;
                  height: 11px;
                  background: url('@/assets/img/arrows2.jpg') no-repeat;
                  margin-right: 19px;
               }
               &:nth-child(1) {
                  margin-right: 58px;
               }
            }
         }
      }
   }
</style>
